<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
// 将cesium 目录下的Build/cesium 4个目录拷贝到public下, widgets拷贝一份到src下
import * as Cesium from 'cesium'
import "./Widgets/widgets.css"
import { onMounted} from 'vue'

// 设置cesium token 
// https://ion.cesium.com/tokens?page=1
// 去除页脚提示信息  this application is using Cesium's default ion access token. Please assign Cesiu
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ODEyNzdmNi1jNDY2LTQ3NzUtOGRhMy0xZWIwODI4OTMwMTYiLCJpZCI6MzA0NzUxLCJpYXQiOjE3NDc4MTU3MDl9.Wx7aw95pNtpmdql27PABOntR7sfuJ5s9V0Ncz7PuORk'
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/'
// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边经度
  89.5,
  // 南边纬度
  20.4,
  // 东边经度
  110.4,
  // 北边纬度
  61.2
)

onMounted(()=>{
  const viewer = new Cesium.Viewer('cesiumContainer',{
    // 是否显示信息窗口
    infoBox: false,
    // 设置地形
    terrainProvider: new Cesium.CesiumTerrainProvider({
      url: Cesium.IonResource.fromAssetId(1), // 默认全球地形
      requestWaterMask: true,   // 启用水面效果
      requestVertexNormals: true // 启用光照效果
    })
  })
  console.log(viewer)
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
})

</script>

<style>
*{
  margin: 0;
  padding: 0;
}

#cesiumContainer{
  width: 100vw;
  height: 100vh;
}
</style>
